<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE HTML>
<html>
  <head>
    <title>模块清单</title>
	<%@ include file="include/common.jsp" %>
  </head>
  <body>
  <%@ include file="include/top.jsp" %>
<div class="hr-mt"></div>
<div>
  	<h2 class="span12">模块发现管理 <small><button class="btn" type="button" onclick="window.location.href='refind.do'">重新检索模块</button></small></h2>
  	<div id="accordion" class="span8">
  		<c:forEach items="${beans}" var="bean" varStatus="status">
	   		<h3><a href="#">${bean.name}（${bean.uid}）</a></h3>
	   		<div>
	   					<table <c:if test="${status.first}">id="moduleList"</c:if> moduleId="${bean.uid}" class="thead table table-bordered table-condensed">
	   						<thead><tr>
	   							<th class="span4">模块位置</th>
	   							<th class="span1">发布方式</th>
	   							<th class="span1">启用状态</th>
	   							<th class="span1"> </th>
	   						</tr></thead>
	   						<tbody class="ui-sortable">
								<c:forEach items="${bean.modules}" var="module">
									<tr id="${module.randomId}">
										<td class="span4">${module.url}</td>
										<td class="span1">${module.publisherDispatcherName}</td>
										<td class="span1">${module.disabled}</td>
										<td class="span1"><div class="dragable">拖动</div></td>
									</tr>
								</c:forEach>
							</tbody>
			   			</table>
	   		</div>
	   	</c:forEach>
   	</div>
   	</div>
  </body>
  <script type="text/javascript">
  /***表格拖拽排序*/
  function dodrag() {
	window.orgOrder = [];
	$("#moduleList tbody>*").each(function() {
		orgOrder.push(this.id);
	});
	$( "#moduleList tbody" ).sortable({ 
		handle: ".dragable",
	    placeholder: "sortable-placeholder",
	    	start: function(event, ui) {
				var helper = ui.helper;
				var placeholder = ui.placeholder;
				if (helper.attr("nodeName") == "TR" && placeholder.attr("nodeName") == "TR") {
					var td, i, width, height = $(helper.children()[0]).height();
					for (i = 0; i < helper.children().length; i++) {
						placeholder.append($("<td>").height(height));
					}
					for (i = 0; i < helper.children().length; i++) {
						width = $(placeholder.children()[i]).width();
						$(helper.children()[i]).width(width);
					}
				}
			}, 
			beforeStop: function(event, ui) {
				var order = [];
				$("#moduleList tbody>*").each(function() {
					var id = parseInt(this.id);
					if (id) {
						order.push(id);
					}
				});
				if (order.toString() != orgOrder.toString()) {
					var url = Issue.constants.CONTEXT+"admin/" + $("#moduleList").attr("moduleId") + "/resort.do";
					$.ajax({
						url: url,
						type: "POST",
						data: "json=" + $.toJSON(order),
						success: function() { orgOrder = order; },
						error: function() {$("#moduleList tbody").sortable("cancel"); }
					});
				}
			}
	}).disableSelection();
  }
  $("#accordion").accordion({
	  change : function(event, ui) {
		  $("#moduleList").attr("id", "");
		  ui.newContent.children('table').attr("id", "moduleList");
		 dodrag();
			
	  }
  });	
  dodrag();
  </script>
</html>
